<template>
    <div>
        <basic-container>
            <el-page-header @back="goBack" content="客户信息列表"></el-page-header>
        </basic-container>
        <basic-container>
            <el-table
                :data="tableList"
                ref="multipleTable"
                tooltip-effect="dark"
                :header-cell-style="{
                    background: 'rgb(255, 191, 191)',
                    color: 'rgb(44,44,44)'
                }"
                stripe
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column label="序号" width="55" align="center">
                    <template slot-scope="scope">
                        <span v-text="getIndex(scope.$index)"></span>
                    </template>
                </el-table-column>
                <el-table-column label="客户信息" prop="contactName" width="96" align="center"></el-table-column>
                <el-table-column label="客户号" prop="businessNo" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.businessNo == ''">---</span>
                        <span v-else>{{ scope.row.businessNo }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="来源" prop="addWay" width="102" align="center"></el-table-column>
                <el-table-column label="归属成员" width="100" prop="employeeName" align="center"></el-table-column>
                <el-table-column label="标签" prop="tag" width="180" align="center">
                    <template slot-scope="scope">
                        <el-popover placement="top-start" width="200" trigger="hover" v-if="scope.row.tagList && scope.row.tagList.length > 0">
                            <div>
                                <el-tag type="primary" style="margin: 2px" v-for="(item, index) in scope.row.tagList" :key="index">{{ item.tagName }}</el-tag>
                            </div>
                            <div slot="reference">
                                <el-tag type="primary" style="margin: 2px" v-for="(item, index) in scope.row.tagList ? scope.row.tagList.slice(0, 2) : []" :key="index">{{ item.tagName }}</el-tag>
                                <el-tag type="primary" style="margin: 2px" v-if="scope.row.tagList && scope.row.tagList.length > 2">...</el-tag>
                            </div>
                        </el-popover>
                        <div v-else>--</div>
                    </template>
                </el-table-column>
                <el-table-column label="添加时间" prop="createTime" align="center"></el-table-column>
                <el-table-column label="状态" prop="stateInherit" align="center"></el-table-column>
            </el-table>
            <div class="madp-pagination-wrap">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="page.current"
                    :page-sizes="[10, 20, 30, 50, 100]"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                ></el-pagination>
            </div>
            <div class="madp-transfer" v-if="permissions.cp_incumbency_succession_referral">
                <el-button type="primary" @click="transferCustomer">转接</el-button>
            </div>
            <!-- 转接弹框 -->
            <el-dialog class="madp-transfer-customer" :visible.sync="dialogTableVisible" :close-on-click-modal="false">
                <el-form :model="refForm" ref="refForm" class="madp-form" :inline="true">
                    <el-form-item>
                        <el-input placeholder="请输入成员姓名" v-model.trim="refForm.name"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchName">搜索</el-button>
                    </el-form-item>
                </el-form>
                <el-table
                    ref="table"
                    :data="gridData"
                    empty-text="请搜索要接收转接客户的成员"
                    @selection-change="handleSingleChange"
                    @select="dialogCheck"
                    :header-cell-style="{
                        background: 'rgb(255, 191, 191)',
                        color: 'rgb(44,44,44)'
                    }"
                    stripe
                >
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <el-table-column property="name" label="企业成员" align="center" width="150"></el-table-column>
                    <el-table-column property="status" label="激活状态" align="center" width="200"></el-table-column>
                    <el-table-column property="mobile" align="center" label="手机号码"></el-table-column>
                    <el-table-column property="position" align="center" label="职务"></el-table-column>
                </el-table>
                <div class="madp-transfer">
                    <el-button type="primary" @click="sureFn">确定</el-button>
                </div>
            </el-dialog>
        </basic-container>
    </div>
</template>
<script>
import { queryEmployeeOfCustomer, queryActivationEmployee, inheritEmployee, queryCustomerTransferStateList } from '@/api/customer/incumbency-succession';
import { mapGetters } from 'vuex';
export default {
    props: [],
    data() {
        return {
            // 多选内容
            multipleSelection: [],
            // 选中人员id
            selectCustomerIds: [],
            tableList: [],
            // 分页
            page: {
                current: 1, // 当前页
                pageSize: 10,
                total: 0
            },
            // 表单对象
            refForm: {
                name: ''
            },
            // 表格数据
            gridData: [],
            // 弹窗开关
            dialogTableVisible: false,
            selectioned: '' //单选中的值
        };
    },
    computed: {
        ...mapGetters(['permissions'])
    },
    mounted() {
        this.getEmployeeOfCustomerList();
    },
    methods: {
        //获取表格序号
        getIndex($index) {
            return (this.page.current - 1) * this.page.pageSize + $index + 1;
        },
        /*实现单选*/
        dialogCheck(selection, row) {
            this.$refs.table.clearSelection();
            if (selection.length === 0) {
                // 判断selection是否有值存在
                this.selectioned = '';
                return;
            }
            if (row) {
                this.selectioned = row;
                this.$refs.table.toggleRowSelection(row, true);
            }
        },
        // 返回
        goBack() {
            this.$router.go(-1);
        },
        // 获取成员列表数据
        getEmployeeOfCustomerList() {
            let id = {
                id: this.$route.query.id,
                wxUserId: this.$route.query.wxUserId,
                size: this.page.pageSize,
                current: this.page.current
            };
            queryEmployeeOfCustomer(id).then((res) => {
                if (res.data.code == 0) {
                    this.tableList = res.data.data.records;
                    this.page.total = res.data.data.total;
                }
            });
        },
        // 获取表格数据
        getActivationEmployeeList() {
            let params = {
                name: this.refForm.name
            };
            queryActivationEmployee(params).then((res) => {
                if (res.data.code === 0) {
                    this.gridData = res.data.data;
                }
            });
        },
        // 分页
        handleSizeChange(val) {
            this.page.pageSize = val;
            this.getEmployeeOfCustomerList(this.page);
        },
        // 分页
        handleCurrentChange(val) {
            this.page.current = val;
            this.getEmployeeOfCustomerList(this.page);
        },
        // 更新选中内容
        handleSelectionChange(val) {
            this.multipleSelection = val;
            //对多选数组进行遍历，取出外部联系人id
            let arr = [];
            this.multipleSelection.map((item) => {
                arr.push(item.wxExternalUserid);
            });
            this.selectCustomerIds = arr;
        },
        // 更新选中内容
        handleSingleChange(val) {
            this.multipleSelection = val;
        },
        // 条件查询
        searchName() {
            this.getActivationEmployeeList();
        },
        // 转接
        transferCustomer() {
            if (this.selectCustomerIds.length > 0) {
                (this.selectioned = ''), this.getActivationEmployeeList();
                this.dialogTableVisible = true;
            } else {
                this.$message.error('请先选择要转接的客户！');
            }
        },
        // 点击确定
        sureFn() {
            if (this.gridData.length == 0) {
                this.$message.error('请搜索要接收客户的成员！');
            } else if (!(this.selectioned && this.selectioned.wxUserId)) {
                this.$message.error('请选择要接收客户的成员！');
            } else {
                let params = {
                    newWxUserId: this.selectioned.wxUserId,
                    oldWxUserId: this.$route.query.wxUserId,
                    wxExternalUserid: this.selectCustomerIds
                };
                inheritEmployee(params).then((res) => {
                    if (res.data.code === 0) {
                        this.dialogTableVisible = false;
                        this.refForm.name = '';
                        if (res.data.data[0].message === '转接开始') {
                            this.$alert(`${res.data.data[0].message}，该客户将会在24小时以后，转接到你要转接的成员上，该转接操作也会发送信息告知客户，若客户拒绝，则转接失败`, '转接说明', {
                                confirmButtonText: '确定',
                                callback: () => {}
                            });
                        } else {
                            this.$alert(res.data.data[0].message, '转接说明', {
                                confirmButtonText: '确定',
                                callback: () => {}
                            });
                        }
                        this.getEmployeeOfCustomerList();
                    } else {
                        this.$message.error('转接操作失败！');
                    }
                });
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.el-page-header {
    color: #ed5555;
}
.el-page-header__content {
    font-size: 15px;
    font-weight: 500;
}
// 分页
.madp-pagination-wrap {
    float: right;
    margin: 20px;
}
.madp-dialog {
    width: 220px;
}
.madp-transfer {
    margin-top: 80px;
    text-align: center;
}
.madp-form {
    text-align: center;
}
/deep/ .madp-transfer-customer .el-table__header-wrapper {
    .el-checkbox {
        display: none;
    }
}
</style>
